<template>
  <div>
      <h2>房型列表</h2>
      <div>
          房型：<input type="text" v-model="queryInfo.houseTypeName">
          面积:<input type="text" v-model="queryInfo.minArea"/> -  <input type="text" v-model="queryInfo.maxArea"/>
          <input type="button" value="查询" @click="getList"> 
      </div>
      <table class="table table-bordered">
        <tr>
          <td>ID</td>
          <td>房型名称</td>
          <td>房型图片</td>
          <td>面积</td>
          <td>房型添加时间</td>
          <td>操作</td>
        </tr>
        <tr v-for="item in list ">
          <td>{{ item.hTypeId }}</td>
          <td>{{ item.hTypeName }}</td>
          <td>{{ item.hTypeArea }}</td>
          <td>
            <img :src=" 'https://localhost:7086'+ item.hTypePhoto" width="60" height="60" alt="">
          </td>
          <td>{{ item.hTypecCreatTime.substring(0,10) }}</td>
          <td>操作</td>
        </tr>
      </table>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, onMounted } from 'vue';
import axios from 'axios';
import { useRouter, useRoute } from 'vue-router';

const route = useRoute();
const router = useRouter();

let data:any = reactive({
  queryInfo:{
    houseTypeName:'',
    minArea:'',
    maxArea:'',
    pageIndex:1,
    pageSize:10
  },
  list:[],
  totalPage:0,
  totalCount:0
})
let {queryInfo,list,totalPage,totalCount} = toRefs(data)

onMounted(()=>{
  getList()
})

const getList = ()=>{
  let obj = {
    houseTypeName:queryInfo.value.houseTypeName,
    minArea:queryInfo.value.minArea,
    maxArea:queryInfo.value.maxArea,
    pageIndex:queryInfo.value.pageIndex,
    pageSize:queryInfo.value.pageSize
  }
  axios({
    url:'/api/Test/GetHouseTypes',
    method:'get',
    params:obj
  })
  .then(res=>{
    console.log(res);
    list.value = res.data.data
    totalCount.value = res.data.totalCount
    totalPage.value = res.data.totalPage
  })
  .catch(err=>{
    console.log(err);
    
  })
}
</script>

<style scoped>

</style>